<template>
  <div style="display: flex; align-items: center">
    <n-button circle size="small" @click="showModal = true">
      <lucide-icon name="Search" />
    </n-button>
    <n-modal v-model:show="showModal">
      <n-card
        :style="`width: ${(height * 4) / 3}px; height: ${height}px`"
        title="候选组"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <template #header-extra>
          <n-button type="tertiary" quaternary @click="showModal = false">
            <lucide-icon name="X" />
          </n-button>
        </template>
        <n-tabs type="card" tab-style="min-width: 80px;">
          <n-tab-pane key="role" name="角色">
            <RoleTable ref="refRoleTable" :height="bodyHeight" @select="onSelected" />
          </n-tab-pane>
        </n-tabs>
        <div class="selected-wrap">
          <label class="title">已选：</label>
          <div class="list">
            <n-tag
              v-for="(item, index) in state.selected"
              :key="item.id"
              type="info"
              closable
              @close="onClose(index, item)"
            >
              {{ item.name ? item.name : item.id }}
            </n-tag>
          </div>
        </div>
        <template #footer>
          <n-space justify="end">
            <n-button secondary @click="showModal = false">
              <div style="display: flex; align-items: center; gap: 2px">
                <lucide-icon name="X" />
                取消
              </div>
            </n-button>
            <n-button type="info" secondary @click="onOk">
              <div style="display: flex; align-items: center; gap: 2px">
                <lucide-icon name="Check" />
                确定
              </div>
            </n-button>
          </n-space>
        </template>
      </n-card>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, defineAsyncComponent } from 'vue'
  import { NCard, NSpace, NTabs, NTabPane } from 'naive-ui'

  const RoleTable = defineAsyncComponent(() => import('./DialogItem/RoleTable.vue'))

  const refRoleTable = ref()

  const emits = defineEmits(['select'])

  const height = computed(() => document.documentElement.clientHeight - 10)
  const bodyHeight = computed(() => document.documentElement.clientHeight - 10 - 300)

  const showModal = ref(false)

  const state = reactive({ selected: [] as any[] })

  const onSelected = (data: any[]) => {
    const action = data[0].action
    if (action == 'check' || action == 'checkAll') {
      //去重
      const mergeSelected: any[] = ([] as any[]).concat(state.selected).concat(data)
      const result = mergeSelected.reduce((acc, curr) => {
        const index = acc.findIndex((item) => item.id === curr.id)
        if (index < 0) {
          acc.push(curr)
        }
        return acc
      }, [])
      state.selected = result
    } else {
      for (let i = 0; i < data.length; i++) {
        const idx = state.selected.findIndex((item) => item.id == data[i].id)
        if (idx >= 0) {
          state.selected.splice(idx, 1)
        }
      }
    }
  }

  const onClose = (i: number, item: any) => {
    state.selected.splice(i, 1)
    refRoleTable.value.removeItem(item)
  }

  const onOk = () => {
    emits('select', state.selected)
    showModal.value = false
  }

  const init = (data: any[]) => {
    if (data) {
      state.selected = data.map((r) => {
        return { id: r.roleId, name: r.roleName }
      })
    } else {
      state.selected = []
    }
  }

  defineExpose({ init })
</script>

<style lang="scss" scoped>
  .selected-wrap {
    padding: 15px 0;
    display: flex;
    align-items: center;
    .title {
      font-weight: bold;
      height: 28px;
      line-height: 28px;
    }
    .list {
      display: flex;
      gap: 6px;
    }
  }
</style>
